<template>
	<div class="occupationAnalysis">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe7d8;</i>
				当前位置 / 游戏内分析 / <span>{{title}}</span>
			</div>
		</div>
		<div class="choose_dialog fadeInDown animated">
			<div class="block">
				<el-form  class="demo-form-inline" :inline="true" :model="ruleForm">
					<el-form-item label="选择日期：" :label-width="formLabelWidth">
						<el-date-picker
						v-model="ruleForm.startDate"
						align="left"
						type="daterange"
						placeholder="请选择日期"
						@change='dateChange' 
						:picker-options="pickerOptions0">
						</el-date-picker>
					</el-form-item>
					<el-form-item  class='conmit'>
						<el-button type="primary"  icon="search" @click="search()" :disabled="searchable">查询</el-button>
		    		</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="right_content">
			<div class="occupationAnalysisTable"  style='margin-bottom:40px;'>
				<div class="occupationAnalysisTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						汇总信息
						 <el-button type="primary" size="mini" class="excel"  @click.stop="excel('1','游戏内分析-职业分析-汇总信息')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1],"float":"right","marginTop":"5px","marginRight":"5px"}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button> 
					</span>
				</div>
				<div class="occupationAnalysisTableBody fadeIn animated">
                    <template>
						<el-table
							v-loading="loading"
							element-loading-text="拼命加载中"
							:data="tableData1"
							border
							>
							<el-table-column 
								align="center"
								v-for="(col,key) in tableHead1"
								:prop="col.prop" 
								:label="col.label" 
								:key="col.prop" 
							>
							</el-table-column>
						</el-table>
                    </template>							
				</div>
				<div class="occupationAnalysisChart">
					<div class="realTimeData" id='realTimeData' style="width:49.5%;float:left;height:100%"></div>
					<div class="realTimeData" id='realTimeData2' style="width:49.5%;float:right;height:100%"></div>
				</div>
			</div>
			<div class="occupationAnalysisTable"  style='margin-bottom:40px;'>
				<div class="occupationAnalysisTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						详细数据
						 <el-button type="primary" size="mini" class="excel"  @click.stop="excel('2','游戏内分析-职业分析-详细数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1],"float":"right","marginTop":"5px","marginRight":"5px"}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button> 
					</span>
				</div>
				<div class="occupationAnalysisTableBody fadeIn animated">
                    <template>
						<el-table
							v-loading="loading"
							element-loading-text="拼命加载中"
							:data="tableData2"
							border
							>
							<el-table-column 
								sortable
								align="center"
								v-for="(col,key) in tableHead2"
								:prop="col.prop" 
								:label="col.label" 
								:key="col.label"
								:width="150"
							>
							</el-table-column>
						</el-table>
                    </template>							
					<div class="pages occupationAnalysisPage">
						<el-pagination
							@size-change="handleSizeChange2"
							@current-change="handleCurrentChange2"
							:current-page="page2.currentPage"
							:page-sizes="page2.pageSizes"
							:page-size="page2.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page2.dataTotal">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		 <a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a> 
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./occupationAnalysis.styl"></style>
<script src="./occupationAnalysis.js"></script>
